<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input v-model="formInline.mobile" placeholder="请输入电话号码"></el-input>
      </el-form-item>
      <el-form-item label="所属部门">
        <el-input v-model="formInline.dept_name" placeholder="请输入部门"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="warning" @click="adds">新增</el-button>
      </el-form-item>
    </el-form>



    <!--列表-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="用户id"
        prop="userid"
        width="120">
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="dept_name"
        label="所属部门">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="手机号">
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <span>{{scope.row.status==1?"正常":"禁用"}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="创建对象"
        type="date">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="updates(scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="del(scope.row.userid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--添加的对话框-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="传真" :label-width="formLabelWidth">
          <el-input v-model="form.fax" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="座机号" :label-width="formLabelWidth">
          <el-input v-model="form.landlinenumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select v-model="form.deptid" placeholder="请选择部门">
            <el-option v-for="dlist in option" label="dlist.dept_name" value="dlist.deptid"></el-option>
          </el-select>
        </el-form-item>
        <br>

        <el-select v-model="form.province" placeholder="省" @change="sheng">
          <el-option
            v-for="item in options"
            :key="item.region_id"
            :label="item.region_name"
            :value="item.region_id">
          </el-option>
        </el-select>

        <el-select v-model="form.city" placeholder="市" @change="shi">
          <el-option
            v-for="item in options1"
            :key="item.region_id"
            :label="item.region_name"
            :value="item.region_id">
          </el-option>
        </el-select>


        <el-select v-model="form.country" placeholder="县" @change="xian">
          <el-option
            v-for="item in options2"
            :key="item.region_id"
            :label="item.region_name"
            :value="item.region_id">
          </el-option>
        </el-select>

        <!--status开关-->
        <el-form-item label="状态">
          <el-radio v-model="form.status" label="0">禁用</el-radio>
          <el-radio v-model="form.status" label="1">正常</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改的对话框-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible2">
      <el-form :model="forms">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="forms.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="forms.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="forms.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="家庭住址" :label-width="formLabelWidth">
          <el-input v-model="forms.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="传真" :label-width="formLabelWidth">
          <el-input v-model="forms.fax" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="forms.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="座机号" :label-width="formLabelWidth">
          <el-input v-model="forms.landlinenumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="forms.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="所属部门" :label-width="formLabelWidth">
          <el-select v-model="forms.deptid" placeholder="请选择部门">
            <el-option v-for="dlist in option" label="dlist.dept_name" value="dlist.deptid"></el-option>
          </el-select>
        </el-form-item>
        <br>

        <el-select v-model="forms.province" placeholder="省" @change="sheng1">
          <el-option
            v-for="item in options3"
            :key="item.region_id"
            :label="item.region_name"
            :value="item.region_id">
          </el-option>
        </el-select>

        <el-select v-model="forms.city" placeholder="市" @change="shi1">
          <el-option
            v-for="item in options4"
            :key="item.region_id"
            :label="item.region_name"
            :value="item.region_id">
          </el-option>
        </el-select>


        <el-select v-model="forms.country" placeholder="区" @change="xian1">
          <el-option
            v-for="item in options5"
            :key="item.region_id"
            :label="item.region_name"
            :value="item.region_id">
          </el-option>
        </el-select>
        <!--status开关-->
         <el-form-item label="状态">
          <el-radio v-model="forms.status" label="0">禁用</el-radio>
          <el-radio v-model="forms.status" label="1">正常</el-radio>
         </el-form-item>
       </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
    <!--分页参数-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[10,20,30,40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>

</template>

<script>
import { select,add,del,update } from "@/api/weishu/user/user";
import { rlist } from "@/api/weishu/sysRegion/sysRegion";
export default {
  data(){
    return{
      //列表数据
      tableData:[],
      //模糊查询
      formInline:{
        username:"",
        mobile:"",
        dept_name:""
      },
      //分页参数
      pageNum:1,
      pageSize:10,
      total:0,

      options:[],
      options1:[],
      options2:[],
      options4:[],
      options3:[],
      options5:[],

      option:[],
      //修改
      dialogFormVisible2: false,
      forms:{

      },
      //添加
      dialogFormVisible: false,
      form: {
      },
      parent_id:"",
      region_id:"",
      formLabelWidth: '120px'
    }
  },
  methods:{
    //模糊查询的方法
    onSubmit(){
      this.list()
    },
    //查询方法
    list(){
      select(this.formInline).then(response=>{
        this.pageNum=response.pageNum
        this.pageSize=response.pageSize
        this.total=response.total;
        this.tableData=response.list

      })
    },
    handleSizeChange(val) {
      this.pageSize=val;
      this.list();
    },
    handleCurrentChange(val) {
      this.pageNum=val;
      this.list();
    },
    //全选全不选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    sheng() {
      //查询三级联动的数据
      rlist({
          parent_id:1
      }).then(response=>{
        this.options=response;
        this.region_id=this.form.province;
        alert(JSON.stringify(this.region_id))
      })
    },
    shi(){
      //查询三级联动的数据
      rlist({
           parent_id:this.parent_id
      }).then(response=>{
        this.region_id=this.form.city;
        this.options1=response;
        alert(JSON.stringify(this.form.region_id))
      })
    },
    xian(){
      //查询三级联动的数据
      rlist({
          parent_id:this.parent_id
      }).then(response=>{
        this.region_id=this.form.country;
        this.options2=response;
      })
    },
    sheng1() {
      //查询三级联动的数据
      rlist().then(response=>{
        this.options3=response;
      })
    },
    shi1(){
      //查询三级联动的数据
      rlist(this.forms.province).then(response=>{
        this.options4=response;
      })
    },
    xian1(){
      //查询三级联动的数据
      rlist(this.forms.city).then(response=>{
        this.options5=response;
      })
    },
    adds(){

      //打开添加框
      this.dialogFormVisible=true;
      this.form={};
    },

    //添加
    add(){
        add(this.form).then(response=>{
          this.dialogFormVisible=false
          if (response){
            this.$message.success("添加成功")
            this.list();
          }else{
            this.$message.error("添加失败")
          }
        })
    },
    //修改
    updates(row){
      this.dialogFormVisible2=true;
      this.forms=row;
    },
    update(){
      update(this.forms).then(response=>{
        this.dialogFormVisible2=false
        if (response){
          this.$message.success("修改成功")
          this.list();
        }else{
          this.$message.error("修改失败")
        }
      })
    },
    //删除的方法
    del(userid){
      //删除
      del(userid).then(response=>{
        if (response){
          this.$message.success("删除成功")
          this.list();
        }else{
          this.$message.error("删除失败")
        }
      })
    },
  },
  //初始化的方法
  created() {
    this.list();
    this.sheng();
    this.sheng1();

  }

}
</script>
<style scoped>

</style>
